<template>
  <div class="flow-detail">
    <bread-crumb :titleArr="[$t('configLazyLoad.businessConfig.businessTemplateSetting'), $t('configLazyLoad.businessConfig.templateDetail')]" @back="back" :font-size="14" style="padding: 8px 10px"></bread-crumb>
    <div class="flow-title">
      <p class="flow-name">{{flowInfo.name}}</p>
      <p class="flow-status">{{$t('public.state')}}：{{flowInfo.status === 'enable' ? $t('configLazyLoad.public.reuse'):  $t('configLazyLoad.public.stop')}}</p>
    </div>
    <!--工单模版设置-->
    <flow-config ref="flow"
                 class="flow-connfig"
                 tabHeight="calc(100% - 90px)">
                 
    </flow-config>
  </div>
</template>

<script>
  import flowConfig from './flowConfig/index'
  import breadCrumb from '../../../ui-modules/breadCrumb/BreadCrumbConfig'
  export default {
    name: 'flow-detail',
    data () {
      return {
      }
    },
    provide: function () {
      return {
        busType: 'detailFlow'
      }
    },
    components: {
      flowConfig,
      breadCrumb
    },
    computed: {
      flowInfo () {
        return this.$store.state.config.businessConfig.detailFlow.flowInfo || {}
      }
    },
    methods: {
      // 跳转到工单列表
      back () {
        // 加随机数，解决页面不跳转问题
        this.$router.push('/index/newConfig/businessConfig/busConfigList?' + Math.random())
      }
    },
    activated () {
      // 根据参数_id初始化工单模版设置
      let ref = this.$refs.flow
      if (ref) {
        ref.init(this.$route.query._id)
      }
    }
    // beforeRouteEnter (to, from, next) {
    //   next(vm => {
    //     // 根据参数_id初始化工单模版设置
    //     let ref = vm.$refs.flow
    //     if (ref) {
    //       ref.init(to.query._id)
    //     }
    //   })
    // }
  }
</script>

<style scoped lang='stylus'>
  @import '../../../../assets/common.styl'
  .flow-detail
    height 100%
  .flow-connfig
    height calc(100% - 100px)
  .flow-title
    background-color #f6f6f6
    padding 10px
    margin 20px
  .flow-name
    font-size 14px
    color $cf-gray1
    padding-bottom 5px
  .flow-status
    font-size 12px
    color $cf-gray4
</style>
